<template>
  <!-- 主页 -->
  <div class="home">
    <!-- 轮播图 -->
    <!-- <Carousel/> -->
    <div class="column-container">
      <!-- 电影类型筛选 -->
      <div class="movie-filter">
        <div class="genre-buttons">
          <span class="label">类型：</span>
          <button
              v-for="genre in genres"
              :key="genre.categoryid"
              :class="{ 'active': selectedGenre === genre.categoryid }"
              @click="selectGenre(genre.categoryid)">
             {{ genre.category }}
          </button>
        </div>
      </div>
      <!-- 电影列表 -->
      <div class="column-head">
        <h2>电影列表</h2>
        <a href="#">查看更多 <i class="el-icon-arrow-right"></i></a>
      </div>
      <div class="column-main">
        <ul>
          <li v-for="(item, index) in movieList" :key="index">
            <img :src="item.posterPath" alt="">
            <div class="book-info">
              <div class="book-head">
                <a @click="detailsId(item.movieId)">{{ item.title }}</a>
              </div>
              <div class="book-intro">
                <p>{{ item.plotSummary }}</p>
              </div>
              <div class="book-survey">
                <span class="author">导演：{{ item.directors }}</span>
                <span class="rect">上映时间：{{ item.releaseDate }}</span>
                <span class="rect">类别：{{ item.genres }}</span>
                <span class="rect">评分：{{ item.avgRating }}分</span>
              </div>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[15, 25, 35, 45]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="movieList.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Carousel from "@/components/Carousel";

export default {
  name: 'Home',
  components: {
    Carousel,
  },
  data() {
    return {
      movieList: [], // 所有电影列表
      genres: [], // 电影类型列表
      selectedGenre: '', // 选中的电影类型
      params: {
        pageNum: 1,
        pageSize: 15,
        categoryId: '', // 新增 categoryId 参数
      },
    };
  },
  methods: {
    // 跳转详情页
    detailsId(id) {
      console.log('^^^^^^id^^^^^^', id)
      this.$router.push({
        path: '/details',
        query: { id: id }
      })
    },
    // 分页改变每页数量
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getMovieList();
    },
    // 分页改变当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getMovieList();
    },
    // 获取电影类型列表
    getGenresList() {
      request({ url: '/movie/category/categoryList', method: "GET" }).then(
          response => {
            this.genres = response.data.data;
          });
    },
    // 获取电影列表
    getMovieList() {
      request({
        url: '/movie/movie/list',
        method: "GET",
        params: this.params
      }).then(response => {
        this.movieList = response.data.rows;
      });
    },
    // 选择电影类型
    selectGenre(genreId) {
      this.selectedGenre = genreId;
      this.params.categoryId = genreId;
      this.getMovieList();
    }
  },
  mounted() {
    this.getGenresList();
    this.getMovieList();
  },
};
</script>

<style>
/*好看的小说----------------------------------------------------*/
.column-container {
  width: 1200px;
  margin: 0 auto;
}

.column-head {
  display: flex;
  justify-content: space-between;
  padding: 30px 0 10px 0;
}

.column-head h2 {
  font-size: 24px;
  color: #333357;
}

.column-head a {
  height: 30px;
  font-size: 14px;
  text-align: center;
  color: #333357;
  line-height: 26px;
  border: 2px solid #333357;
  border-radius: 20px;
  padding: 0 10px;
  margin: 5px;
  transition: 1s;
}

.column-head a:hover {
  /*color: #ee558b;
  border-color: #ee558b;*/

  color: #1e1f22;
  border-color: #1e1f22;
}

.column-main ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.column-main ul li {
  width: 32%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.column-main ul li img {
  width: 100px;
  margin-right: 10px;
  border-radius: 5px;
}

.book-head a {
  font-size: 18px;
  font-weight: bold;
  color: #333357;
  line-height: 40px;
}

.book-intro {
  width: 100%;
  font-size: 14px;
  overflow: hidden;
  /*多行显示省略号*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.book-survey {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.book-survey .author {
  /* width: 100px; */
}

.book-survey .rect {
  /*background-color:*/
  /* background: #f5f5f7; */
  border-radius: 2px;
  color: #666;
  font-size: 12px;
  /* padding: 2px 6px; */
}

.list-main {
  display: flex;
  justify-content: space-between;
}

.month {
  width: 24%;
  background-color: #f5f5f7;
  border-radius: 10px;
  padding: 20px;
}

.month-header h3 {
  font-size: 20px;
  line-height: 40px;
  border-bottom: 1px solid #333357;
}

.one {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e6e6e6;
}

.book-list-info {
  width: 60%;
}

.book-list-cover {
  width: 30%;
}

.book-list-info h3 {
  background: #bf2c24;
  color: #fff;
  font: 700 14px/18px Arial;
  height: 18px;
  margin-bottom: 3px;
  text-align: center;
  width: 36px;
}

.book-list-info a {
  font-size: 16px;
  line-height: 40px;
}

.book-list-info .digital {
  font-size: 16px;
  color: #bf2c24;
}

.book-list-info .author {
  font-size: 12px;
  color: #a6a6a6;
  line-height: 30px;
}

.book-list-cover img {
  width: 100%;
  border-radius: 5px;
}

.month ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
}

.num-box {
  width: 10%;
}

.num-box span {
  background: #ededed;
  color: #666;
  display: block;
  font: 700 14px/16px Arial;
  height: 16px;
  letter-spacing: -1px;
  margin-top: 16px;
  overflow: hidden;
  text-align: center;
  width: 16px;
}

.span-orange .num-box span {
  background: #e67225;
  color: #fff;
}

.span-yellow .num-box span {
  background: #e6bf25;
  color: #fff;
}

.name-box {
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name-box h2 {
  color: #1a1a1a;
  height: 31px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 16px;
}

.el-pagination {
  display: flex;
  justify-content: center;
}

.movie-filter {
  margin-bottom: 20px;
}

.genre-buttons {
  display: flex;
  flex-wrap: wrap;
}

.genre-buttons button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
  background-color: transparent; /* 设置未选中状态的按钮背景为透明 */
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.genre-buttons button.active {
  background-color: #29a681; /* 选中状态的按钮背景颜色 */
  color: #fff;
}

.label {
  display: inline-block;
  line-height: 36px; /* 与按钮高度相同 */
  margin-right: 10px; /* 调整与按钮之间的间距 */
  font-weight: bold; /* 加粗 */
  font-size: 16px; /* 加大 */
}
</style>
